<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />
        <script src="../lib/jquery-1.10.2.min.js"></script>
        <script src="../src/tinyselect.js"></script>
        <link rel="stylesheet" type="text/css" href="../dist/tinyselect.css" />
        <link rel="stylesheet" type="text/css" href="misc/css/example.css" />
        <link rel="stylesheet" type="text/css" href="../lib/codemirror/codemirror.css" />
        <script src="../lib/codemirror/codemirror.js"></script>
        <script src="../lib/codemirror/mode/javascript/javascript.js"></script>
        <script src="../lib/codemirror/mode/css/css.js"></script>
        <script src="misc/js/source.js"></script>
    </head>

    <body>
        <div class="tinyselectcontext-container">
            <div id="tinyselectcontext" class="multiple"></div>
            <button id="toggleReadonly">只读模式(on)</button>
        </div>
        <script>
            $.getJSON('misc/data/data.json').then(function(data) {
                var ts = tinyselect('#tinyselectcontext', {
                    readonly: true,
                    item: {
                        data: data,
                        value: [3, 5]
                    },
                    result: {
                        multi: true
                    }
                });

                $('#toggleReadonly').click(function() {
                    if(ts.readonly()) {
                        ts.readonly(false);
                        $(this).text('只读模式(off)')
                    } else {
                        ts.readonly(true);
                        $(this).text('只读模式(on)')
                    }
                });
            });
        </script>
    </body>

</html>